<template>
  <view class="content">
    <swiper class="notices" indicator-dots autoplay circular>
      <swiper-item  v-for="i in 4" :key="i">
        <view class="notice"
          ><text>轮播公告{{ i }}</text></view
        >
      </swiper-item>
    </swiper>
    <uni-grid
      :column="1"
      :highlight="false"
      :show-border="false"
    >
      <uni-grid-item class="modal-item"  v-for="item in modules" :key="item.url">
        <navigator
        :url="item.url"
        open-type="navigate"
        hover-class="navigator-hover"
      >
      <view class="module-item-bg">
        <view :class="item.icon"></view>
         <view >{{ item.title }}</view>
      </view>
      
      </navigator>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script setup>


const modules = reactive([

  {
    title: "我的课程",
    url: "/pages/teacherCourseCenter/teacherCourseCenter",
    icon: "t-icon t-icon-kecheng",
  },
]);
</script>

<style lang="scss" scoped>
.content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  .modal-item {
    text-align: center;
    width: 350rpx;
    height: 200rpx;
    font-size: 50rpx;
    line-height: 200rpx;
    border : 1px solid;
    border-radius: 40rpx;
    margin-bottom: 100rpx;
    background: linear-gradient(#abdcff, #0396ff);
    color: #fff;
    .module-item-bg{
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
    }
  }
  .notices {
    width: 680rpx;
    border: 1px solid;
    border-radius: 60rpx;
    padding: 30rpx;
    box-sizing: border-box;
    height: 360rpx;
    margin-bottom: 50rpx;
  }
}
</style>
